<template>
	
	<view class="pageBox">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
					</view>
				</view>
				<view class="title">可选课程</view>
				<view class="right">

				</view>
			</view>
		</view>
		<view class="shadow"></view>
		<view class="Box">
			<view class="courseBox">
				<view>
					<view class="courseImg"></view>
					<view class="courseInfo">
						<view>春天培训班</view>
						<view class="activityCenter">
							<image src="../../../static/img/parents/place.png" mode="" ></image>
							<view>活动中心</view>
						</view>
						<view class="curseTime">
							<image src="../../../static/img/parents/time.png" mode="" ></image>
							<view>周一下午16:00-17:00</view>
						</view>
					</view>
				</view>
				<view class="courseState">已结束</view>
			</view>
			<view class="courseBox">
				<view>
					<view class="courseImg"></view>
					<view class="courseInfo">
						<view>春天培训班</view>
						<view class="activityCenter">
							<image src="../../../static/img/parents/place.png" mode="" ></image>
							<view>活动中心</view>
						</view>
						<view class="curseTime">
							<image src="../../../static/img/parents/time.png" mode="" ></image>
							<view>周一下午16:00-17:00</view>
						</view>
					</view>
				</view>
				<view class="courseState">已结束</view>
			</view>
			<view class="courseBox">
				<view>
					<view class="courseImg"></view>
					<view class="courseInfo">
						<view>春天培训班</view>
						<view class="activityCenter">
							<image src="../../../static/img/parents/place.png" mode="" ></image>
							<view>活动中心</view>
						</view>
						<view class="curseTime">
							<image src="../../../static/img/parents/time.png" mode="" ></image>
							<view>周一下午16:00-17:00</view>
						</view>
					</view>
				</view>
				<view class="courseState">已结束</view>
			</view>
			<view class="courseBox">
				<view>
					<view class="courseImg"></view>
					<view class="courseInfo">
						<view>春天培训班</view>
						<view class="activityCenter">
							<image src="../../../static/img/parents/place.png" mode="" ></image>
							<view>活动中心</view>
						</view>
						<view class="curseTime">
							<image src="../../../static/img/parents/time.png" mode="" ></image>
							<view>周一下午16:00-17:00</view>
						</view>
					</view>
				</view>
				<view class="courseState">已结束</view>
			</view>
			<view class="courseBox">
				<view>
					<view class="courseImg"></view>
					<view class="courseInfo">
						<view>春天培训班</view>
						<view class="activityCenter">
							<image src="../../../static/img/parents/place.png" mode="" ></image>
							<view>活动中心</view>
						</view>
						<view class="curseTime">
							<image src="../../../static/img/parents/time.png" mode="" ></image>
							<view>周一下午16:00-17:00</view>
						</view>
					</view>
				</view>
				<view class="courseState">已结束</view>
			</view>
			<view class="courseBox">
				<view>
					<view class="courseImg"></view>
					<view class="courseInfo">
						<view>春天培训班</view>
						<view class="activityCenter">
							<image src="../../../static/img/parents/place.png" mode="" ></image>
							<view>活动中心</view>
						</view>
						<view class="curseTime">
							<image src="../../../static/img/parents/time.png" mode="" ></image>
							<view>周一下午16:00-17:00</view>
						</view>
					</view>
				</view>
				<view class="courseState">已结束</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
			}
		},
		methods: {
			goBack() {
				// 此处是写返回页面的方法、
			
				uni.navigateBack({
					delta: 1 //返回只上一级页面
				});
			}
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		}
	}
</script>

<style lang="less" scoped>
.navBarBox {}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;

		line-height: 93rpx;
		font-size: 40rpx;
	}

	.goback {
		flex: 1;
		height: 100%;
	}

	.goicon {
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}

	.title {
		flex: 1;
		height: 100%;

	}

	.right {
		flex: 1;
	}

	.shadow{
		width: 100%;
		height: 20rpx;
		background-color: #f7f7f7;
	}
	.Box{
		width: 100%;
		background-color: #f7f7f7;
		overflow: scroll;
		.courseBox{
			margin-bottom: 20rpx;
			width: 690rpx;
			margin-left: 30rpx;
			border-radius: 10rpx;
			background-color: #fff;
			height: 220rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			view:first-child{
				display: flex;
				.courseImg{
					background-color: #007AFF;
					border-radius: 10rpx;
					width: 146rpx;
					height: 146rpx;
					margin-left: 18rpx;
					margin-top: 32rpx;
				}
				.courseInfo{
					view:first-child{
						margin-top: 48rpx;
						margin-left: 10rpx;
						font-size: 30rpx;
						font-weight: bold;
					}
					.activityCenter{
						margin-top: 20rpx;
						margin-left: 10rpx;
						overflow: hidden;
						image{
							float: left;
							width: 20rpx;
							height: 24rpx;
						}
						view{
							float: left;
							font-size: 20rpx;
							margin-left: 12rpx;
							color: #b3b3b3;
						}
					}
					.curseTime{
						margin-top: 8rpx;
						margin-left: 10rpx;
						overflow: hidden;
						image{
							float: left;
							width: 20rpx;
							height: 24rpx;
						}
						view{
							float: left;
							font-size: 20rpx;
							margin-left: 12rpx;
							color: #b3b3b3;
						}
					}
				}
			}
			
			.courseState{
				margin-top: 20rpx;
				font-size: 20rpx;
				background-color: #ff6767;
				color: #fff;
				width: 112rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				border-radius: 25rpx 0 0 25rpx;
				letter-spacing: 4rpx;
			}
		}
	}
</style>
